<template>
    <div class="header">
        <div class="left-menu"><i class="icon-menu"></i></div>
        <div class="right-search"><i class="icon-search"></i></div>
        <div class="center-btns">
            <router-link tag="i" to="myMusic"><i class="icon-music"></i></router-link>
            <router-link tag="i" to="foundMusic"><i class="icon-wangyi"></i></router-link>
            <router-link tag="i" to="community"><i class="icon-community"></i></router-link>
        </div>
    </div>
</template>

<script>
  export default {
    name: "top-bar"
  }
</script>

<style scoped lang="scss">
    @import '../../../static/font-icon/style.css';
    @import '../../../static/style/public';
    $icon-size:28px;
    $lr-margin:15px;
    .header{
        position:fixed;
        top:0px;
        left:0px;
        height:$topHeight;
        width:100%;
        background-color:$primaryColor;
        i{
            font-size: $icon-size;
            color:$linkColor;
            line-height:$topHeight;
            &:hover{
                color:$linkActiveColor;
                cursor:pointer;
            }
        }
        .left-menu,.right-search{
            position:absolute;
            top:0px;
            width:$topHeight;
            height:$topHeight;
            i{
                color:$linkActiveColor;
            }
        }
        .left-menu{
            left:$lr-margin;
        }
        .right-search{
            right:$lr-margin;
        }
        .center-btns{
            text-align: center;
            height:$topHeight;
            i{
                padding:0px 5px;
            }
        }
    }
    .router-link-exact-active{
        i{
            color:$linkActiveColor;
        }
    }
</style>
